import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
import { render } from '@testing-library/react';
import Fncom from './creat-zujian/hs-index'
import Clascom from './creat-zujian/clas-index'
import Com from './事件绑定'
// import Index from './响应式'
import Index from './性能优化'
// 创建react元素
// const h1 = React.createElement('h1', { id: 'test' }, 'hello react')
// const p = React.createElement('p', { id: 'p' }, '我是p标签')
// const sp = React.createElement('span', { style: { color: 'red', display: 'block' } }, 'span标签')
// const div1 = React.createElement('div', { className: 'div' }, h1, p, sp)
// 使用jsx创建元素
const h1 = <div className="div">
  <h1>hello react jsx</h1>
  <p>pbiaoqian<span>span</span></p>
  <div>
    <h2>h2h2h2h</h2>
  </div>
</div>
let a = '插值表达式', ab = 12345, obj = { a: 9, b: 8 }
let fn = () => {
  console.log('fn执行')
  // return 10010
  return <span>121212</span>
}
const h2 = (
  <div>
    <h2>{a}</h2>
    <p>{1}</p>
    <ul>
      <li>{'str'}</li>
      <li>{false ? '1' : '2'}</li>
      <li>{ab}</li>
      <li>{fn()}</li>
      <li>{[1, 2, 3]}</li>
      <li>{obj.a}</li>
      <li>{<b>b标签</b>}</li>
    </ul>
  </div>
)
let load = true
const isLoad = () => {
  if (load) {
    return (
      <div>
        <p><span>请求成功</span></p>
      </div>
    )
  } else {
    return (
      <div>
        <p><span>请求中···</span></p>
      </div>
    )
  }
}
const loading = (
  <div>
    <h2>{load ? <span>请求完成</span> : <span>请求中</span>}</h2>
    <h2>{isLoad(load)}</h2>
  </div>
)
// 列表渲染
// 假数据（从后台通过ajax调用获取的）
const songs = [
  { id: 1, name: '野狼disco', color: 'red' },
  { id: 2, name: '像我这样的人', color: 'blue' },
  { id: 3, name: '桥边姑娘', color: 'orange' }
]
const renderSongs = () => {
  return songs.map((item) => {
    return <li key={item.id}>{item.name}</li>
  })
}
const list = (
  <div>
    <ul>
      {
        // [<li>1</li>, <li>2</li>, <li>3</li>]
        songs.map((item) => {
          return <li className="it" style={{ backgroundColor: item.color, color: '#fff' }} key={item.id}>{item.name}</li>
        })
        // renderSongs()
      }
    </ul>
  </div>
)
// 函数创建组件
function Fun() {
  return (
    <div>
      <h2>函数创建的组件</h2>
    </div>
  )
}
const Fun2 = () => {
  return (
    <div>
      <h2>函数创建的组件2</h2>
    </div>
  )
}
// 使用ES6关键字创建组件
// -类组件：使用 **ES6 的 class关键字** 创建的组件 
// - 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法和属性  
// - 类里边实现父类提供的render()，返回一个模版
class Compt extends React.Component {
  render() {
    return (
      <div>
        <h2>this’is 类组件</h2>
      </div>
    )
  }
}
// jxs模板
const div0 = (
  <div>
    <h3>函数组件</h3>
    <Fun />
    <Fun2></Fun2>
    <hr />
    <Compt />
    <hr />
    <h2>单文件组件********</h2>
    <Fncom />
    <hr />
    <h2>单文件组件2********</h2>
    <Clascom />
  </div>
)
ReactDOM.render(
  <Index />,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
// serviceWorker.unregister();
